{extend name="../../admin/view/main"}

{block name="content"}
{include file='goods/formstyle'}

{:var_dump($mode)}


<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card" id="GoodsForm">
    <div class="layui-card-body">

        <label class="layui-form-item block relative">
            <span class="help-label label-required-prev"><b>商品</b>Category Name</span>
            <select class="layui-select" lay-search name="goods_id" lay-search>
                {foreach $goods as $goods_v}{if !empty($vo.goods_id) and $goods_v.id == $vo.goods_id}
                <option selected value="{$goods_v.id}">{$goods_v.goods_name}</option>
                {else} ax
                <option value="{$goods_v.id}">{$goods_v.goods_name}</option>
                {/if}
                {/foreach}
            </select>
        </label>

        <label class="layui-form-item block">
            <span class="help-label"><b>商品单价</b>Unit Price</span>
            <input class="layui-input" name="unit_price" placeholder="请输入拼单价格" {notempty name='vo.id'}readonly{/notempty}
                   type="number" min="1" required value="{$vo.unit_price|default='10'}">
        </label>

        <label class="layui-form-item block relative">
            <span class="help-label"><b>参与总人数</b>Total Number</span>
            <input class="layui-input" name="people_number" placeholder="请输入参与总人数" {notempty name='vo.id'}readonly{/notempty}
                   type="number"  min="1" required value="{$vo.people_number|default='100'}">
        </label>

        <label class="layui-form-item block relative layui-col-space20">

            <div class="layui-col-md2">
                <span class="help-label"><b>预热人次</b>Participants Number</span>
                <input class="layui-input" name="participants_number" placeholder="请输入参与人数" type="number"
                       required value="{$vo.participants_number|default='0'}" {notempty name='vo.id'}readonly{/notempty}/>
            </div>

            <div class="layui-col-md10">
                <span class="help-label"><b>预设机器人</b>Robots</span>
                <div class="layui-col-space1 flex" style="justify-content: flex-start">
                    <div class="layui-col-md10 flex-align-start">
                        <div class="layui-form-item">
                            <div id="choiceRobots" {notempty name='vo.id'}readonly{/notempty}></div>
                        </div>
                    </div>
                    <div class="layui-col-md2 text-center">
                        <button data-robots data-call="choiceRobots" type="button" {notempty name='vo.id'}disabled="disabled"{/notempty}
                                class="layui-btn layui-btn-primary">选择机器人</button>
                    </div>
                </div>
            </div>

        </label>

        <label class="layui-form-item block relative">
            <span class="help-label"><b>抽奖期数</b>Draw Times</span>
            <div>
                {notempty name='vo.id'}
                期号：<b>{$vo.sequence_no}</b>，总共：<b>{$vo.sequence_total}</b> 期，第 <b>{$vo.sequence_current}</b> 期.
                {/notempty}
                {empty name='vo.id'}
                <input class="layui-input" name="sequence_total" placeholder="请输入期数" type="number" value="{$vo.sequence_total|default='1'}" />
                {/empty}
            </div>
        </label>

        <label class="layui-form-item block relative">
            <span class="help-label"><b>开奖延迟</b>Draw Delay</span>
            <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start">
                <input class="layui-input" name="draw_delay" placeholder="请输入延迟时间" type="number"
                           step="5" value="{$vo.draw_delay|default='0'}">
            </div>
        </label>

        <label class="layui-form-item block relative">
            <span class="help-label"><b>指定中奖人</b>Winner</span>
            <input class="layui-input" name="appoint_phone" placeholder="请输入用户手机号" type="text" value="{$vo.appoint_phone|default=''}">
        </label>

        <label class="layui-form-item relative block">
            <span class="help-label"><b>是否热门</b>Is Hot</span>
            <div>
                {if isset($vo.is_hot ) and $vo.is_hot == 1}
                <input type="radio" name="is_hot" value="1" title="是" checked>
                {else}
                <input type="radio" name="is_hot" value="1" title="是" >
                {/if}

                {if isset($vo.is_hot)}
                <input type="radio" name="is_hot" value="0" title="否" {if $vo.is_hot == 0} checked{/if}>
                {else}
                <input type="radio" name="is_hot" value="0" title="否" checked>
                {/if}

            </div>
        </label>

        <div class="hr-line-dashed margin-top-40"></div>

        {notempty name='vo.id'}<input name="id" type="hidden" value="{$vo.id}">{/notempty}
        <div class="layui-form-item text-center">
            <button class="layui-btn layui-btn-danger" ng-click="pageBack()" type="button">取消编辑</button>
            <button class="layui-btn" type="submit">保存商品</button>
        </div>

    </div>
</form>
{/block}

{block name='script'}
<style>
    button[disabled], input[readonly] {
        background: #EEEEEE;
    }
</style>
<script type="text/javascript">
    let robotSelect = null;


    var HtmlUtil = {
        /*1.用浏览器内部转换器实现html转码*/
        htmlEncode:function (html){
            //1.首先动态创建一个容器标签元素，如DIV
            var temp = document.createElement ("div");
            //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
            (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
            //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
            var output = temp.innerHTML;
            temp = null;
            return output;
        },
        /*2.用浏览器内部转换器实现html解码*/
        htmlDecode:function (text){
            //1.首先动态创建一个容器标签元素，如DIV
            var temp = document.createElement("div");
            //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
            temp.innerHTML = text;
            //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }
    };


    $(function(){
        layui.use(['xmSelect'], function() {
            let xmSelect = layui.xmSelect;
            let options = {
                el: '#choiceRobots',
                name: 'choice_robots',
                readOnly: true,
                tips: '',
                toolbar: {
                    show: true,
                    list: [ 'ALL', 'CLEAR', 'REVERSE']
                },
                data: [],
                language: 'zn',//语言包
            };
            robotSelect = xmSelect.render(options);
            {notempty name="choice_robots"}
            let robots = JSON.parse(HtmlUtil.htmlDecode('{$choice_robots|json_encode}')) || [];
            robots.map((o, i) => { o.selected = 'true'; robots[i] = o; })
            robotSelect.setValue(robots);
            {/notempty}
        });

        layui.form.on('select(draw-type)', (data) => {
            switch (data.value) {
                case 'at-time':
                    $('#atTime').prev().addClass('label-required-prev');
                    $('#atTime').addClass('label-required-prev')
                        .find('input.layui-input')
                        .removeAttr('disabled');
                    break;
                case 'immediate':
                    $('#atTime').prev().removeClass('label-required-prev');
                    $('#atTime').removeClass('label-required-prev')
                        .find('input.layui-input')
                        .disable();
                    break;
                default:
                    break
            }
        });

        function showDialog() {
            layui.layer.open({
                type: 2
                , title: '选择机器人'
                , area: ['70%', '580px']
                , content: tapiRoot + '/user/robots?type=robot'
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var checkStatus = iframeWin.layui.table.checkStatus('robotTable');
                    if (checkStatus.data.length > 0) {
                        let choices = [];
                        for(let i = 0; i < checkStatus.data.length; i ++) {
                            let item = checkStatus.data[i];
                            let pitem = {name: item.nickname, value: item.id, selected: true};
                            if (!(pitem in choices)) {
                                choices.push(pitem);
                            }
                        }
                        robotSelect.update({data: choices});
                        layer.close(index)
                        return false
                    }
                }
                , btn2: function (index, layero) {
                    layer.close(index)
                    return false
                }
                , cancel: function (index, layero) {
                    layer.close(index)
                    return false
                }
            });
        }

        window.$body.off('click', '[data-robots]');
        window.$body.on('click', '[data-robots]', function () {
            return showDialog();
            // return $.form.modal(tapiRoot + '/user/robots', this.dataset, '选择机器人', null, true, null, ['90%', '80%']);
        });



    });
</script>
{/block}
